<template>
  <div class="entranceExamDetails page-exp">
    <pageHeader></pageHeader>
    <div class="content">
      <div class="crumbs flex-r">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/entranceExam' }">考试入口</el-breadcrumb-item>
          <el-breadcrumb-item v-if="type != 'mistake'">考试详情</el-breadcrumb-item>
          <el-breadcrumb-item v-if="type == 'mistake'">错题回顾</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="modelTestResults" v-loading="testRsLoad">
        <img :src="diaploama" alt />
        <span class="finalScore">{{ examResult.finalScore }}</span>
        <div>
          <h1>本次模考成绩</h1>
          <div class="desc">
            <div class="item">
              <p class="total">{{ examResult.totalQuestion }}道</p>
              <p>总题数</p>
            </div>
            <div class="item">
              <p class="answer">{{ examResult.totalQuestion }}道</p>
              <p>总答题</p>
            </div>
            <div class="item">
              <p class="accuracy">{{ examResult.accuracy }}</p>
              <p>正确率</p>
            </div>
            <div class="item">
              <p class="credits">+{{ examResult.score }}</p>
              <p>积分数</p>
            </div>
          </div>
        </div>
      </div>
      <div class="quizArea flex-rb">
        <div class="quizContent">
          <div class="title flex-rs">
            <p>{{ examName }}</p>
            <p></p>
          </div>
          <div class="inside" v-loading="quizCardLoading">
            <template v-if="current < sCount">
              <h1 class="stem">(单选) {{ current + 1 }}.{{ problems.singleChoiceQuestionBeanList[current].context }}</h1>
              <el-radio
                v-model="sData[current].options.filter(v => (v || '').split('.')[0] == sData[current].userResult)[0]"
                disabled
                :label="item"
                v-for="item in sData[current].options"
                :key="item.id"
                >{{ item }}</el-radio
              >
              <p class="myAnswer">
                正确答案：
                <span class="correct" v-if="sData[current] && sData[current].result">{{ sData[current].result }}</span>
              </p>
              <p class="myAnswer">
                您的答案：
                <span class="correct" v-if="sData[current] && sData[current].userResult && sData[current].userResult == sData[current].result"
                  >回答正确：{{ sData[current].userResult }}</span
                >
                <span class="error" v-if="sData[current] && sData[current].userResult && sData[current].userResult != sData[current].result"
                  >回答错误：{{ sData[current].userResult }}</span
                >
              </p>
              <h1 class="resolve">本题解析</h1>
              <p class="analysis" v-if="sData[current] && sData[current].analysis">{{ sData[current].analysis }}</p>
              <p class="analysis" v-else>暂无解析</p>
            </template>
            <template v-if="current >= sCount && current < sCount + mCount">
              <h1
                class="stem"
                v-if="problems.multipleChoiceQuestionBeanList[current - sCount] && problems.multipleChoiceQuestionBeanList[current - sCount].context"
              >
                (多选) {{ current + 1 }}.{{ problems.multipleChoiceQuestionBeanList[current - sCount].context }}
              </h1>
              <!-- v-model="sData[current].options.filter(v=>(v||'').split('.')[0]==sData[current].userResult)[0]" -->
              <!-- {{mData[current-sCount].options}}
              {{mData[current-sCount].userResult}}
              {{mData[current-sCount].options.filter(v=>(v||'').split('.')[0]==mData[current-sCount].userResult)}}-->
              <el-checkbox-group class="flex-cs" v-if="mData[current - sCount] && mData[current - sCount].options">
                <el-checkbox v-model="mAnswer" :label="item" disabled v-for="item in mData[current - sCount].options" :key="item.id">{{
                  item
                }}</el-checkbox>
              </el-checkbox-group>
              <p class="myAnswer">
                正确答案：
                <span class="correct" v-if="mData[current - sCount] && mData[current - sCount].result">{{ mData[current - sCount].result }}</span>
              </p>
              <p class="myAnswer">
                您的答案：
                <span
                  class="correct"
                  v-if="
                    mData[current - sCount] &&
                      mData[current - sCount].userResult &&
                      mData[current - sCount].userResult == mData[current - sCount].result
                  "
                  >回答正确：{{ mData[current - sCount].userResult }}</span
                >
                <span
                  class="error"
                  v-if="
                    mData[current - sCount] &&
                      mData[current - sCount].userResult &&
                      mData[current - sCount].userResult != mData[current - sCount].result
                  "
                  >回答错误：{{ mData[current - sCount].userResult }}</span
                >
              </p>
              <h1 class="resolve">本题解析</h1>
              <p class="analysis" v-if="mData[current] && mData[current].analysis">{{ mData[current].analysis }}</p>
              <p class="analysis" v-else>暂无解析</p>
            </template>
            <template v-if="current >= sCount + mCount">
              <h1
                class="stem"
                v-if="
                  problems.judgeChoiceQuestionBeanList[current - sCount - mCount] &&
                    problems.judgeChoiceQuestionBeanList[current - sCount - mCount].context
                "
              >
                (判断) {{ current + 1 }}.{{ problems.judgeChoiceQuestionBeanList[current - sCount - mCount].context }}
              </h1>
              <el-radio-group v-model="jAnswer" class="flex-c">
                <el-radio disabled :label="1" value="1">对</el-radio>
                <el-radio disabled :label="0" value="0">错</el-radio>
              </el-radio-group>
              <p class="myAnswer">
                正确答案：
                <span class="correct" v-if="jData[current - sCount - mCount] && jData[current - sCount - mCount].result">{{
                  jData[current - sCount - mCount].result == 1 ? "对" : "错"
                }}</span>
              </p>
              <p class="myAnswer">
                您的答案：
                <span
                  class="correct"
                  v-if="
                    jData[current - sCount - mCount] &&
                      jData[current - sCount - mCount].userResult &&
                      jData[current - sCount - mCount].userResult == jData[current - sCount - mCount].result
                  "
                  >回答正确：{{ jData[current - sCount - mCount].userResult == 1 ? "对" : "错" }}</span
                >
                <span
                  class="error"
                  v-if="
                    jData[current - sCount - mCount] &&
                      jData[current - sCount - mCount].userResult &&
                      jData[current - sCount - mCount].userResult != jData[current - sCount - mCount].result
                  "
                  >回答错误：{{ jData[current - sCount - mCount].userResult == 1 ? "对" : "错" }}</span
                >
              </p>
              <h1 class="resolve">本题解析</h1>
              <p class="analysis" v-if="jData[current] && jData[current].analysis">{{ jData[current].analysis }}</p>
              <p class="analysis" v-else>暂无解析</p>
            </template>
          </div>
        </div>
        <div class="quizCard" v-loading="quizCardLoading">
          <div class="bar"></div>
          <div class="baseInfo">
            <h1 class="title">基本信息</h1>
            <div class="info">
              <span>考试发起人：{{ examInfo.provide }}</span>
              <span>试题：{{ examResult.totalQuestion }}道</span>
              <span style="width:100%">发起部门：{{ examInfo.deptName }}</span>
              <span>试卷满分：{{ examInfo.score }}</span>
              <span>考试时间：{{ examInfo.time }}分钟</span>
            </div>
            <h1 class="title">答题卡</h1>
            <div class="status flex-rs">
              <div class="process" v-if="quizCount">错题：{{ quizCount }}道</div>
              <div class="totalTime">答题时间：{{ tool.getCookie("xinyun-front-answer-time") }}</div>
            </div>
            <div class="quizNumbers">
              <div
                class="cell error"
                :class="{ select: current == index }"
                v-for="(item, index) in sCount"
                :key="item.id"
                @click="showCurrentExamDetail(index)"
              >
                {{ index + 1 }}
              </div>
              <div
                class="cell error"
                :class="{ select: current == index2 + sCount }"
                v-for="(item, index2) in mCount"
                :key="item.id"
                @click="showCurrentExamDetail(index2 + sCount)"
              >
                {{ index2 + 1 + sCount }}
              </div>
              <div
                class="cell error"
                :class="{ select: current == index3 + sCount + mCount }"
                v-for="(item, index3) in jCount"
                :key="item.id"
                @click="showCurrentExamDetail(index3 + sCount + mCount)"
              >
                {{ index3 + 1 + sCount + mCount }}
              </div>
            </div>
            <div class="figureColumn flex-rs">
              <span></span>
              <span>当前选题</span>
              <span class="error"></span>
              <span>答错选题</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <PageFooter></PageFooter>
  </div>
</template>
<script>
import pageHeader from "@/components/PageHeader.vue";
import PageFooter from "@/components/PageFooter.vue";
export default {
  name: "entranceExam-detail",
  components: {
    pageHeader,
    PageFooter
  },
  watch: {},
  data() {
    return {
      examId: this.$route.query.id,
      examName: this.$route.query.name,
      type: this.$route.query.type,
      testRsLoad: true,
      quizCardLoading: true,
      submitTime: "",
      count: 1,
      radio: "",
      trueFalse: "",
      checkbox: [],
      handPaperVisible: false,
      examResult: "", //考试结果
      diaploama: require("@/assets/img/entranceExam/diploma.png"),
      handPaperImg: require("@/assets/img/entranceExam/handPaper.png"),
      questionMark: require("@/assets/img/entranceExam/questionMark.png"),
      examQuestionId: "", //试题id
      current: 0,
      remainTime: "",
      sData: [],
      mData: [],
      jData: [],
      //所有题目信息
      problems: {
        judgeChoiceQuestionBeanList: [],
        multipleChoiceQuestionBeanList: [],
        singleChoiceQuestionBeanList: []
      },
      // 错题详细信息
      quiz: [],
      // 答题最新状态
      quizNowStatus: []
    };
  },
  computed: {
    examInfo() {
      let json;
      if (this.$route.query.examInfo) {
        json = JSON.parse(this.$route.query.examInfo);
      }
      return json;
    },
    // 单选数量
    sCount() {
      return this.problems.singleChoiceQuestionBeanList.length;
    },
    // 多选数量
    mCount() {
      return this.problems.multipleChoiceQuestionBeanList.length;
    },
    // 判断数量
    jCount() {
      return this.problems.judgeChoiceQuestionBeanList.length;
    },
    // 题目总数
    quizCount() {
      return this.sCount + this.mCount + this.jCount;
    },
    mAnswer() {
      return this.mData[this.current - this.sCount].options.filter(v => (v || "").split(".")[0] == this.mData[this.current - this.sCount].userResult);
    },
    jAnswer() {
      let result;
      if (this.jData[this.current - this.sCount - this.mCount] && this.jData[this.current - this.sCount - this.mCount].userResult) {
        result = Number(this.jData[this.current - this.sCount - this.mCount].userResult);
      }
      return result;
    }
  },
  created() {
    this.getExamResult();
    this.getMistakes();
  },
  methods: {
    showCurrentExamDetail(index, flag) {
      this.current = index;
    },
    getExamResult() {
      let that = this;
      let time = new Date().valueOf();
      that
        .$http({
          url: "/wisdomlearn/exam/v1/getExamResult",
          method: "post",
          headers: {
            accessToken: that.config.token,
            appId: that.config.appId,
            userId: JSON.parse(that.tool.getCookie("xinyun-front-userInfo")).userId,
            clientId: "",
            sign: that.tool.sign("/wisdomlearn/exam/v1/getExamResult", time),
            timestamp: time
          },
          data: {
            examId: that.examId
          }
        })
        .then(res => {
          if (res.retCode == "00000") {
            that.examResult = res.data;
            that.testRsLoad = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    num(n) {
      return n < 10 ? "0" + n : "" + n;
    },
    // 获取错题
    getMistakes() {
      let that = this;
      let time = new Date().valueOf();
      that
        .$http({
          url: "/wisdomlearn/exam/v1/getErrorQuestionList",
          method: "post",
          headers: {
            accessToken: that.config.token,
            appId: that.config.appId,
            userId: JSON.parse(that.tool.getCookie("xinyun-front-userInfo")).userId,
            clientId: "",

            sign: that.tool.sign("/wisdomlearn/exam/v1/getErrorQuestionList", time),
            timestamp: time
          },
          data: {
            examId: that.examId
          }
        })
        .then(res => {
          if (res.retCode == "00000") {
            that.quizCardLoading = false;
            that.problems = {
              judgeChoiceQuestionBeanList: res.data.judgeChoiceQuestionBeanList,
              multipleChoiceQuestionBeanList: res.data.multipleChoiceQuestionBeanList,
              singleChoiceQuestionBeanList: res.data.singleChoiceQuestionBeanList
            };
            // 重组单选数据
            that.sData = that.problems.singleChoiceQuestionBeanList;
            for (let i = 0; i < that.sData.length; i++) {
              that.$set(that.sData[i], "options", [
                "A." + that.sData[i].freeA,
                "B." + that.sData[i].freeB,
                "C." + that.sData[i].freeC,
                "D." + that.sData[i].freeD
              ]);
            }
            // 重组多选数据
            that.mData = that.problems.multipleChoiceQuestionBeanList;
            for (let i = 0; i < that.mData.length; i++) {
              that.$set(that.mData[i], "options", [
                "A." + that.mData[i].freeA,
                "B." + that.mData[i].freeB,
                "C." + that.mData[i].freeC,
                "D." + that.mData[i].freeD,
                "E." + that.mData[i].freeE,
                "F." + that.mData[i].freeF
              ]);
              let rss = that.mData[i].options.filter(v => (v || "").split(".")[0] == [...that.mData[i].userResult].map(t => t));
            }
            that.jData = that.problems.judgeChoiceQuestionBeanList;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    isAnswer(data, id) {
      let that = this;
      if (!data && data !== 0 && data !== 1) {
        that.current++;
      }
    },
    nextErrorExam() {
      if (this.current < this.quizCount - 2) {
        this.current++;
      } else {
        return false;
      }
    },
    nextExam(id) {
      let that = this;
      that.$nextTick(() => {
        that.getExamNow();
      });
      let data;
      that.current++;
    }
  }
};
</script>
<style scoped>
.entranceExamDetails .content {
  min-width: 1200px;
  flex: 1;
  background: #f2f2f2;
}
.entranceExamDetails .content .crumbs {
  width: 100%;
  height: 80px;
  background: #f0efef;
  border-bottom: 1px solid #b6aeae;
}
.content .quizArea {
  width: 1200px;
  margin: 15px auto;
  align-items: flex-start;
}
.quizContent {
  width: 62%;
  background: #fff;
  box-shadow: 0 2px 4px 7px rgba(242, 240, 240, 0.5);
  border-radius: 4px;
}
.quizContent .title {
  width: 100%;
  height: 138px;
  padding: 10px 20px 10px 30px;
  box-sizing: border-box;
  border-bottom: 2px solid #084dcd;
  position: relative;
}
.quizContent .title p {
  font-size: 21px;
  font-weight: bold;
  width: 70%;
  color: #1e1e1e;
  letter-spacing: 0.08px;
  line-height: 39px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.quizContent .title p:last-child {
  color: #818387;
  font-size: 16px;
  letter-spacing: 0.06px;
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 20px;
}
.quizContent .inside {
  padding: 30px 60px;
  box-sizing: border-box;
}
.inside .stem {
  font-size: 21px;
  color: #020202;
  letter-spacing: 0.08px;
  margin-bottom: 30px;
}
.inside .resolve {
  font-size: 21px;
  color: #1968bb;
  letter-spacing: 0.08px;
  line-height: 29px;
}
.inside .btnGroup {
  margin: 30px 0;
}
.inside .btnGroup button {
  width: 160px;
  height: 48px;
  font-size: 21px;
  color: #fefeff;
  letter-spacing: 0.08px;
  background: #05ad1d;
}
.inside .btnGroup button:last-child {
  /* margin-left: 30px; */
  background: #084dcd;
}
.inside .myAnswer span {
  font-size: 14px;
  color: #2178e1;
  letter-spacing: 0.05px;
}
.inside .myAnswer .error {
  color: #ca2b2b;
}
.inside p {
  font-size: 16px;
  color: #444444;
  letter-spacing: 0.06px;
  margin-bottom: 30px;
}
.inside .analysis {
  margin-top: 20px;
  font-weight: bold;
}
.inside .questionMark {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
/* 答题卡 */
.quizCard {
  width: 37%;
  background: #fff;
  border-radius: 9px;
  border-radius: 9px;
}
.quizCard .bar {
  height: 15px;
  background-image: linear-gradient(-51deg, #0bb5fe 0%, #086afc 100%);
}
.quizCard .baseInfo {
  padding: 20px 30px;
  box-sizing: border-box;
}
.quizCard .baseInfo .title {
  font-size: 21px;
  color: #020202;
  letter-spacing: 0.08px;
  margin-bottom: 20px;
}
.baseInfo .status div {
  width: 50%;
  font-size: 18px;
  color: #444444;
  letter-spacing: 0.07px;
  margin-bottom: 20px;
}
.baseInfo .info span {
  width: 50%;
  display: inline-block;
  font-size: 16px;
  color: #444444;
  letter-spacing: 0.06px;
  margin-bottom: 10px;
}
.baseInfo .quizNumbers .cell {
  width: 22px;
  height: 22px;
  line-height: 22px;
  border: 1px solid #d3d0d0;
  border-radius: 5px;
  display: inline-block;
  margin: 0 15px 15px 0;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
}
.baseInfo .quizNumbers .cell.right {
  background: #1968bb !important;
  color: #fff;
}
.baseInfo .quizNumbers .cell.select {
  background: #19bb71 !important;
  color: #fff;
}
.baseInfo .quizNumbers .cell.correct {
  background: #1968bb;
  color: #fff;
}
.baseInfo .quizNumbers .cell.error {
  background: #d72424;
  color: #fff;
}
.baseInfo .quizNumbers .cell.notFinish {
  background: #ccc;
  color: #fff;
}
.baseInfo .quizNumbers .cell:nth-child(10n) {
  margin-right: 0;
}
.baseInfo .figureColumn {
  font-size: 10px;
  color: #676767;
  letter-spacing: 0.04px;
}
.baseInfo .figureColumn .correct {
  background: #1968bb !important;
}
.baseInfo .figureColumn .error {
  background: #d72424 !important;
}
.baseInfo .figureColumn .notFinish {
  background: #ccc !important;
}
.baseInfo .figureColumn span {
  margin-right: 7px;
}
.baseInfo .figureColumn span:nth-of-type(2n + 1) {
  width: 12px;
  height: 12px;
  background: #19bb71;
}
.quizCard .baseInfo .btnGroup {
  margin-top: 20px;
}
.quizCard .baseInfo .btnGroup button {
  width: 114px;
  height: 44px;
  border-radius: 22px;
  background: #2686ec;
  font-size: 16px;
  color: #f8f8f8;
  letter-spacing: 0.06px;
}
.quizCard .baseInfo .btnGroup button:last-child {
  background: #1968bb;
}
.handPaperDialog h1 {
  font-size: 34px;
  color: #1968bb;
  letter-spacing: 0.13px;
  margin-top: 60px;
}
.handPaperDialog .time {
  font-size: 21px;
  color: #676767;
  letter-spacing: 0.08px;
}
.handPaperDialog img {
  width: 234px;
  height: 234px;
  object-fit: contain;
}
.handPaperDialog .handStatus {
  margin-left: 20px;
  justify-content: space-between;
  align-items: flex-start;
}
.handStatus .time {
  margin-top: 0px;
}
/* 模考成绩 */
.modelTestResults {
  width: 1200px;
  height: 195px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 8px;
  margin-top: 15px;
  display: flex;
  align-items: center;
  padding: 0 30px;
  box-sizing: border-box;
  position: relative;
}
.modelTestResults .finalScore {
  position: absolute;
  top: 47%;
  left: 7%;
  font-size: 20px;
  color: #fff;
  font-weight: bold;
  width: 50px;
  text-align: center;
}
.modelTestResults img {
  width: 150px;
  height: 150px;
  margin-right: 30px;
}
.modelTestResults h1 {
  font-size: 36px;
  color: #2178e1;
  letter-spacing: 0.14px;
}
.modelTestResults .desc {
  width: 100%;
  margin-top: 30px;
}
.desc .item {
  width: max-content;
  display: inline-block;
  margin-right: 20px;
  text-align: center;
}
.desc .item p:last-child {
  margin-top: 5px;
  font-size: 12px;
  color: #4d4d4d;
  letter-spacing: 0.05px;
}
.item .total {
  font-size: 24px !important;
  color: #dc8100 !important;
  letter-spacing: 0.09px !important;
}
.item .answer {
  font-size: 24px !important;
  color: #3ab5bb !important;
  letter-spacing: 0.09px !important;
}
.item .accuracy {
  font-size: 24px !important;
  color: #2178e1 !important;
  letter-spacing: 0.09px !important;
}
.item .credits {
  font-size: 24px !important;
  color: #eac829 !important;
  letter-spacing: 0.09px !important;
}
</style>
<style>
.entranceExamDetails .content .crumbs .el-breadcrumb {
  width: 1200px;
  margin: 0 auto;
  font-size: 21px;
}
.quizContent .inside .el-radio-group {
  align-items: flex-start;
  margin: 30px 0;
}
.quizContent .inside .el-radio {
  display: flex;
  align-items: baseline;
}
.quizContent .inside .el-radio__label {
  font-size: 16px;
  color: #444444;
  line-height: 40px;
  letter-spacing: 0.06px;
  white-space: normal;
  display: inline-block;
}
.quizCard .baseInfo .handPaperDialog .el-dialog__header {
  display: none;
}
.quizCard .baseInfo .handPaperDialog .el-dialog__body {
  display: flex;
  justify-content: flex-start;
}
.quizCard .el-dialog {
  border-radius: 17px;
}
.handStatus .el-button {
  width: 98px;
}
.entranceExamDetails .el-checkbox {
  height: 40px;
}
</style>
